<!DOCTYPE html>
<html lang="zh">

<head>
    <th:block th:include="include :: header('故障统计分析')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<style>
    .table-striped {
        min-height: 50%;
    }

    .select-table2 {
        width: 49%;
        background: #fff;
        border-radius: 6px;
        margin-top: 10px;
        padding-top: 5px;
        padding-bottom: 13px;
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
    }

    .select-table3 {
        width: 50%;
        background: #fff;
        border-radius: 6px;
        margin-top: 10px;
        padding-top: 5px;
        padding-bottom: 13px;
        margin-left: 1%;
        box-shadow: 1px 1px 3px rgb(0 0 0 / 20%);
    }
</style>

<body class="gray-bg">
    <div class="ui-layout-west">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 组织机构
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
                            class="fa fa-chevron-up"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
                            class="fa fa-chevron-down"></i></button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
                            class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
    <div class="ui-layout-center">
        <div class="container-div">
            <div class="row">
                <div class="col-sm-12 select-table table-striped">
                    <form id="user-form">
                        <input type="hidden" id="id" name="id" value="138">
                        <!-- <input type="hidden" id="parentId" name="parentId"> -->
                    </form>
                    <table id="bootstrap-table"></table>
                </div>

                <div class="col-sm-6 select-table2 table-striped">
                    <div id="circle" style="width: 500px;height:300px;margin-top: 5%;"></div>
                </div>
                <div class="col-sm-6 select-table3 table-striped">
                    <div id="column" style="width: 500px;height:300px;margin-top: 5%;"></div>
                </div>
            </div>
        </div>
    </div>


    <th:block th:include="include :: footer" />
    <th:block th:include="include :: layout-latest-js" />
    <th:block th:include="include :: ztree-js" />
    <script src="/js/echarts.min.js" th:href="@{/js/echart.min.js}"></script>
    <script th:inline="javascript">
        var Id;
        $(function () {
            var panehHidden = false;
            if ($(this).width() < 769) {
                panehHidden = true;
            }
            $('body').layout({ initClosed: panehHidden, west__size: 185 });
            // 回到顶部绑定
            if ($.fn.toTop !== undefined) {
                var opt = {
                    win: $('.ui-layout-center'),
                    doc: $('.ui-layout-center')
                };
                $('#scroll-up').toTop(opt);
            }
            queryUserList();
            queryDeptTree();
            // echart()
            // echart2()
            circle()
        });

        function queryDeptTree() {
            var url = "/gzmx_scdw/gzmx_scdw/jichuTreeDataNew";
            var options = {
                url: url,
                expandLevel: 2,
                onClick: zOnClick,
            };
            let ab = $.tree.init(options);

            function zOnClick(event, treeId, treeNode) {
                $("#id").val(treeNode.id);
                // $("#parentId").val(treeNode.pId);
                Id = treeNode.id
                //获取饼图
                if (Id != undefined) {
                    $.ajax({
                        url: '/youtian/fault/Chart',
                        method: 'get',
                        headers: { "Content-Type": "application/json" },
                        data: {
                            id: Id
                        },
                        success: function (res) {
                            echart(res.data)
                        }
                    })
                }
                //获取柱图
                if (Id != undefined) {
                    $.ajax({
                        url: '/youtian/fault/Histogram',
                        method: 'get',
                        headers: { "Content-Type": "application/json" },
                        data: {
                            id: Id
                        },
                        success: function (res) {
                            echart2(res.data)
                        }
                    })
                }

                $.table.search();
            }
        }

        function queryUserList() {
            var options = {
                url: '/youtian/fault/list',
                method: 'get',
                modalName: "模型",
                columns: [
                    {
                        field: 'bmName',
                        title: '部门名称'
                    },
                    {
                        field: 'devGgxh',
                        title: '设备类型'
                    },
                    {
                        field: 'quantity',
                        title: '数量'
                    },
                    {
                        field: 'proportion',
                        title: '占比'
                    },
                    {
                        field: 'total',
                        title: '总数'
                    },
                ]
            };
            $.table.init(options);
        }

        $('#btnExpand').click(function () {
            $._tree.expandAll(true);
            $(this).hide();
            $('#btnCollapse').show();
        });

        $('#btnCollapse').click(function () {
            $._tree.expandAll(false);
            $(this).hide();
            $('#btnExpand').show();
        });

        $('#btnRefresh').click(function () {
            queryDeptTree();
        });

        //初始饼图和柱图
        function circle() {
            if (Id == undefined) {
                $.ajax({
                    url: '/youtian/fault/Chart',
                    method: 'get',
                    headers: { "Content-Type": "application/json" },
                    data: {
                        id: 138
                    },
                    success: function (res) {
                        echart(res.data)
                    }
                })
                $.ajax({
                    url: '/youtian/fault/Histogram',
                    method: 'get',
                    headers: { "Content-Type": "application/json" },
                    data: {
                        id: 138
                    },
                    success: function (res) {
                        echart2(res.data)
                    }
                })
            }
        }

        //饼图
        function echart(data) {
            let datas = [];
            let list = [];
            datas.push(data);
            datas.forEach(item => {
                for (var i of item) {
                    list = [
                        // { value: i.total, name: i.bmName },
                        // { value: i.quantity, name: i.bmName },
                        { value: i.total, name: '故障总数' },
                        { value: i.quantity, name: '故障数量' },
                    ]
                }
            })
            var chartDom = document.getElementById('circle');
            var myChart = echarts.init(chartDom);
            option = {
                title: {
                    text: '故障占比统计',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left'
                },
                series: [
                    {
                        name: '故障占比',
                        type: 'pie',
                        radius: '50%',
                        data: list,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            option && myChart.setOption(option);
        }

        //柱图
        function echart2(data) {
            var mounth = []; //月份
            var lastYear = []; //去年
            var lastYears = []; //去年
            var thisYear = []   //今年
            var thisYears = []   //今年
            data.forEach(item => {
                console.log(item);
                if (mounth.indexOf(item.redate) == -1) {
                    mounth.push(item.redate)
                }
                thisYear.push(item.quantity)
                lastYear.push(item.tity)
            })
            thisYear.forEach(item => {
                if (item !== undefined) {
                    thisYears.push(item)
                }
            })
            lastYear.forEach(item => {
                if (item !== undefined) {
                    lastYears.push(item)
                }
            })
            console.log(mounth.splice(6, 1));
            var chartDom = document.getElementById('column');
            var myChart = echarts.init(chartDom);
            option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        magicType: { show: true, type: ['line', 'bar'] },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                xAxis: [
                    {
                        type: 'category',
                        data: mounth,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        max: 150,
                        interval: 50,
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                ],
                series: [
                    {
                        // name: '去年总数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: lastYears
                    },
                    {
                        // name: '今年总数',
                        type: 'bar',
                        tooltip: {
                            valueFormatter: function (value) {
                                return value;
                            }
                        },
                        data: thisYears
                    },
                ]
            };
            option && myChart.setOption(option);
        }
    </script>
</body>

</html>